<template>
    <div class="center-map-container">
        <!-- 地图标题 -->
        <!-- <div class="map-header">
            <h3 class="map-title">{{ regionName }}绿电分布图</h3>
            <div class="map-controls">
                <el-button-group>
                    <el-button :type="currentView === 'overview' ? 'primary' : 'default'" size="small"
                        @click="switchView('overview')">
                        总览
                    </el-button>
                    <el-button :type="currentView === 'stations' ? 'primary' : 'default'" size="small"
                        @click="switchView('stations')">
                        电站分布
                    </el-button>
                    <el-button :type="currentView === 'boundary' ? 'primary' : 'default'" size="small"
                        @click="switchView('boundary')">
                        区域边界
                    </el-button>
                    <el-button :type="currentView === 'province' ? 'primary' : 'default'" size="small"
                        @click="switchView('province')">
                        省级地图
                    </el-button>
                </el-button-group>
            </div>
        </div> -->

        <!-- 绿电地图组件 -->
        <div class="map-wrapper">
            <!-- 绿电地图 -->
            <!-- <GreenPowerMap
        v-if="currentView === 'overview' || currentView === 'stations'"
        ref="mapRef"
        :width="'100%'"
        :height="'100%'"
        :show-controls="false"
        :stations="powerStations"
        @station-click="handleStationClick"
        @map-ready="handleMapReady"
      /> -->

            <!-- 边界地图 -->
            <!-- <BoundaryMap
        v-if="currentView === 'boundary'"
        ref="boundaryMapRef"
        :width="'100%'"
        :height="'100%'"
        :show-controls="false"
        @boundary-click="handleBoundaryClick"
        @map-ready="handleMapReady"
      /> -->

            <!-- 省级地图 -->
            <!-- <ProvinceMap ref="provinceMapRef" :province-code="selectedProvinceCode" :mask-color="'rgba(0, 0, 0, 0.6)'"
                :border-color="'#00d4ff'" :border-width="2" :show-controls="false"
                @province-change="handleProvinceChange" @boundary-click="handleBoundaryClick"
                @map-ready="handleMapReady" /> -->

            <!-- 地图图例 -->
            <!-- <div class="map-legend" v-if="currentView !== 'province'">
                <div class="legend-item" v-for="item in legendData" :key="item.name">
                    <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
                    <span class="legend-text">{{ item.name }}</span>
                </div>
            </div> -->

            <!-- 省份切换面板 -->
            <!-- <div class="province-panel" v-if="currentView === 'province'">
                <div class="panel-title">省份选择</div>
                <div class="province-grid">
                    <button v-for="province in quickProvinces" :key="province.code"
                        :class="['province-btn', { active: selectedProvinceCode === province.code }]"
                        @click="switchProvince(province.code, province.name)">
                        {{ province.name }}
                    </button>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElButton, ElButtonGroup } from 'element-plus'
// import GreenPowerMap from '@/components/tencent-map/green-power-map.vue'
// import BoundaryMap from '@/components/tencent-map/boundary-map.vue'
// import ProvinceMap from '@/components/tencent-map/province-map.vue'

// 地图实例
// const mapRef = ref<any>(null)
// const boundaryMapRef = ref<any>(null)
// const provinceMapRef = ref<any>(null)

// // 当前视图模式
// const currentView = ref<'overview' | 'stations' | 'boundary' | 'province'>('overview')

// // 省级地图相关数据
// const selectedProvinceCode = ref('370000') // 默认山东省

// // 快速切换省份数据
// const quickProvinces = ref([
//   { code: '110000', name: '北京' },
//   { code: '310000', name: '上海' },
//   { code: '320000', name: '江苏' },
//   { code: '330000', name: '浙江' },
//   { code: '370000', name: '山东' },
//   { code: '440000', name: '广东' },
//   { code: '510000', name: '四川' },
//   { code: '530000', name: '云南' }
// ])

// // 区域信息
// const regionName = ref('庆云县')

// // 图例数据
// const legendData = ref([
//   { name: '风力发电站', color: '#52C41A' },
//   { name: '太阳能发电站', color: '#FAAD14' },
//   { name: '混合能源站', color: '#5287DE' },
//   { name: '充电桩', color: '#F5222D' },
// ])

// // 绿电站数据
// const powerStations = ref([
//   {
//     id: 'station1',
//     lat: 37.2631,
//     lng: 117.5266,
//     title: '庆云风电站A',
//     description: '主要风力发电站',
//     type: 'green',
//     power: 150,
//     status: 'online'
//   },
//   {
//     id: 'station2',
//     lat: 37.2231,
//     lng: 117.4866,
//     title: '庆云光伏站B',
//     description: '太阳能发电站',
//     type: 'yellow',
//     power: 80,
//     status: 'online'
//   },
//   {
//     id: 'station3',
//     lat: 37.2031,
//     lng: 117.4666,
//     title: '庆云混合站C',
//     description: '风光互补发电站',
//     type: 'blue',
//     power: 120,
//     status: 'maintenance'
//   },
//   {
//     id: 'station4',
//     lat: 37.2831,
//     lng: 117.5066,
//     title: '庆云充电站D',
//     description: '绿电充电桩群',
//     type: 'red',
//     power: 50,
//     status: 'online'
//   }
// ])
// // 地图事件处理
// const handleMapReady = (mapInstance: any) => {
//   console.log('地图初始化完成', mapInstance)
// }

// const handleStationClick = (station: any) => {
//   console.log('电站点击', station)
// }

// const handleMarkerClick = (marker: any) => {
//   console.log('标记点击', marker)
// }

// const handleBoundaryClick = (boundary: any) => {
//   console.log('边界点击', boundary)
// }

// const handleProvinceChange = (provinceCode: string, provinceName: string) => {
//   console.log('省份切换:', provinceName, provinceCode)
//   selectedProvinceCode.value = provinceCode
//   regionName.value = provinceName
// }

// // 切换省份方法
// const switchProvince = (provinceCode: string, provinceName: string) => {
//   selectedProvinceCode.value = provinceCode
//   regionName.value = provinceName

//   if (provinceMapRef.value) {
//     provinceMapRef.value.switchProvince(provinceCode)
//   }
// }

// // 视图切换
// const switchView = (view: 'overview' | 'stations' | 'boundary' | 'province') => {
//   currentView.value = view

//   switch (view) {
//     case 'overview':
//       regionName.value = '庆云县'
//       // 显示所有内容
//       break
//     case 'stations':
//       regionName.value = '庆云县'
//       // 聚焦到电站分布
//       break
//     case 'boundary':
//       regionName.value = '庆云县'
//       // 聚焦到边界显示
//       break
//     case 'province':
//       regionName.value = '山东省'
//       // 显示省级地图
//       break
//   }
// }

// 生命周期
onMounted(() => {
    // 组件挂载完成
})

onUnmounted(() => {
    // 组件卸载清理
})
</script>

<style lang="less" scoped>
.center-map-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(135deg, rgba(31, 99, 163, 0.1) 0%, rgba(124, 189, 207, 0.1) 100%);
    border-radius: 8px;
    overflow: hidden;

    .map-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: rgba(0, 0, 0, 0.3);
        border-bottom: 1px solid rgba(124, 189, 207, 0.3);

        .map-title {
            margin: 0;
            color: #7EB7FD;
            font-size: 16px;
            font-weight: 600;
        }

        .map-controls {
            :deep(.el-button-group) {
                .el-button {
                    background: rgba(124, 189, 207, 0.1);
                    border-color: rgba(124, 189, 207, 0.3);
                    color: #7EB7FD;

                    &:hover {
                        background: rgba(124, 189, 207, 0.2);
                        border-color: #7CBDCF;
                        color: #ffffff;
                    }

                    &.el-button--primary {
                        background: #5287DE;
                        border-color: #5287DE;
                        color: #ffffff;
                    }
                }
            }
        }
    }

    .map-wrapper {
        position: relative;
        width: 100%;
        height: calc(100% - 70px);

        .map-chart {
            width: 100%;
            height: 100%;
        }

        .map-legend {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 6px;
            border: 1px solid rgba(124, 189, 207, 0.3);

            .legend-item {
                display: flex;
                align-items: center;
                margin-bottom: 8px;

                &:last-child {
                    margin-bottom: 0;
                }

                .legend-color {
                    width: 12px;
                    height: 12px;
                    border-radius: 2px;
                    margin-right: 8px;
                }

                .legend-text {
                    color: #ffffff;
                    font-size: 12px;
                }
            }
        }
    }

    .map-info-panel {
        position: absolute;
        bottom: 20px;
        left: 20px;
        width: 280px;
        background: rgba(0, 0, 0, 0.8);
        border: 1px solid rgba(124, 189, 207, 0.5);
        border-radius: 8px;
        overflow: hidden;

        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: rgba(124, 189, 207, 0.2);
            border-bottom: 1px solid rgba(124, 189, 207, 0.3);

            h4 {
                margin: 0;
                color: #ffffff;
                font-size: 14px;
                font-weight: 600;
            }

            :deep(.el-button) {
                color: #7EB7FD;

                &:hover {
                    color: #ffffff;
                }
            }
        }

        .panel-content {
            padding: 15px;

            .info-item {
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;

                &:last-child {
                    margin-bottom: 0;
                }

                .info-label {
                    color: #7EB7FD;
                    font-size: 12px;
                }

                .info-value {
                    color: #ffffff;
                    font-size: 12px;
                    font-weight: 500;
                }
            }
        }

        .province-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid rgba(124, 189, 207, 0.5);
            border-radius: 8px;
            padding: 16px;
            min-width: 200px;
            max-width: 300px;

            .panel-title {
                color: #7EB7FD;
                font-size: 14px;
                font-weight: 600;
                text-align: center;
                margin-bottom: 12px;
                padding-bottom: 8px;
                border-bottom: 1px solid rgba(124, 189, 207, 0.3);
            }

            .province-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;

                .province-btn {
                    padding: 8px 12px;
                    background: rgba(124, 189, 207, 0.1);
                    border: 1px solid rgba(124, 189, 207, 0.3);
                    border-radius: 4px;
                    color: #7EB7FD;
                    cursor: pointer;
                    transition: all 0.3s;
                    font-size: 12px;
                    text-align: center;

                    &:hover {
                        background: rgba(124, 189, 207, 0.2);
                        border-color: #7CBDCF;
                        color: #ffffff;
                        transform: translateY(-1px);
                    }

                    &.active {
                        background: #5287DE;
                        border-color: #5287DE;
                        color: #ffffff;
                        box-shadow: 0 2px 8px rgba(82, 135, 222, 0.3);
                    }
                }
            }
        }
    }
}

// 响应式设计
@media (max-width: 768px) {
    .center-map-container {
        .map-header {
            flex-direction: column;
            gap: 10px;

            .map-title {
                font-size: 14px;
            }
        }

        .map-info-panel {
            width: calc(100% - 40px);
            bottom: 10px;
            left: 20px;
            right: 20px;
        }

        .map-legend {
            top: 10px;
            right: 10px;
            padding: 10px;
        }
    }
}
</style>